<template>
    <a-collapse class="hk_collapse" :default-active-key="['1']"
                expand-icon-position="right">
        <template #expand-icon="{ active }">
            <icon-double-down v-if="active"/>
            <icon-double-right v-else/>
        </template>
        <a-collapse-item :header="props.title" key="1" ref="collapseItem">
            <a-scrollbar ref="scrollbar" :style="scrollStyle" outer-class="hk_scrollbar">
                <slot/>
            </a-scrollbar>
        </a-collapse-item>
    </a-collapse>
</template>

<script setup>
    const props= defineProps({
        title: {
            type: String,
            default: () => ''
        },
        scroll: {
            type: Boolean,
            default: () => false
        },

    })
    const collapseItem=ref(null)
    const scrollbar=ref(null)
    const scrollStyle=ref({
        overflowY: 'auto',
    })


    const setScroll=()=>{
        //获取元素的内容高度
        const collapseItemHeight = collapseItem.value.$el.clientHeight - collapseItem.value.$el.children[0].clientHeight

        const scrollbarHeight = scrollbar.value.$el.clientHeight

        if(scrollbarHeight > collapseItemHeight  &&  props.scroll){
            scrollStyle.value = {
                overflow: 'auto',
                height:(collapseItemHeight-50) +'px'
            }
        }
    }

    const observer = new ResizeObserver(() => {
        setScroll()
    });

    // 监听高度变化
    onMounted(()=>{
        observer.observe(scrollbar.value.$el); // 监听元素
        setScroll()
    })

    // 离开时销毁监听
    onUnmounted(()=>{
        observer.disconnect();
    })


</script>

<style scoped lang="less">

    .hk_collapse{
        border-color:#0676b0;
        ::v-deep{
            .arco-collapse-item{
                max-height: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .arco-collapse-item-header{
                    color: #02a7fd;
                    background-color: #060e3a;
                    border-color:#0676b0;
                    .arco-icon-hover{
                        &:hover{
                            background-color: transparent;
                            &:before{
                                background-color: transparent;
                            }
                        }
                    }
                }
                .arco-collapse-item-content{
                    flex: 1;
                    overflow: hidden;
                    background-color: #09234e;
                    color: #02a7fd;
                    padding: 0;
                    .arco-collapse-item-content-box{
                        padding: 0;
                    }
                }
            }
        }

        .hk_scrollbar{
            ::-webkit-scrollbar{
                width: .08rem;
                height: .08rem;
            }

            ::-webkit-scrollbar-track {
                background: rgba(7,131,255,0.3);
                border-radius: .4rem;
            }

            ::-webkit-scrollbar-thumb {
                background:rgba(7,131,255,0.6) !important;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #0783FF !important;
            }

            ::-webkit-scrollbar-corner {
                background: rgba(7,131,255,0.3); /* 角落背景色 */
            }

            /* 定制水平滚动条的交集区域样式 */
            ::-webkit-scrollbar-thumb:horizontal {
                background:rgba(7,131,255,0.6) !important;
            }

            /* 定制垂直滚动条的交集区域样式 */
            ::-webkit-scrollbar-thumb:vertical {
                background:rgba(7,131,255,0.6) !important;
            }

        }
    }
</style>